<template>
	<el-dialog
		v-model="visible"
		:title="titleMap[mode]"
		:width="800"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="dialogForm1"
			label-width="70px"
			label-position="top"
			class="formhead"
		>
			<el-row style="display: flex; align-items: center">
				<el-col :span="20">
					<span style="font-size: 25px">优惠管理</span>
				</el-col>

				<el-col :span="4">
					<el-form-item
						label="编号"
						prop="code"
						class="backgroudBlue"
					>
						<el-input
							label="编号"
							v-model="form.code"
							disabled
							placeholder="自动生成"
						></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<sk-tabs type="border-card" v-loading="digloading">
			<el-tab-pane ref="tab" label="基础信息">
				<el-form
					:model="form"
					:rules="rules"
					ref="dialogForm"
					label-width="70px"
					label-position="right"
				>
					<el-row>
						<el-col :span="8">
							<el-form-item label="启用日期" prop="billdate">
								<el-date-picker
									v-model="form.billdate"
									type="datetime"
									value-format="YYYY-MM-DD HH:mm:ss"
									placeholder="选择日期时间"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="优惠业务" prop="service_id">
								<skDicSelect
									v-model="form.service_id"
									:code="'Service'"
									:placeholder="'请选择业务'"
								>
								</skDicSelect>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="单价优惠" prop="price">
								<el-input v-model="form.price"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="适用区域" prop="department_id">
								<skAutodcomplete
									v-model="form.department.name"
									:name="'department'"
									clearable
									:placeholder="'不选通用区域'"
								>
								</skAutodcomplete>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="适用客户" prop="customer_id">
								<skAutodcomplete
									v-model="form.customer.name"
									:name="'customer'"
									clearable
									:placeholder="'不选所有客户'"
								>
								</skAutodcomplete>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="可用次数" prop="quantity">
								<el-input
									v-model="form.quantity"
									:placeholder="'负数表示无限'"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="23">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="form.remark"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="23">
							<el-form-item label="优惠内容" prop="content">
								<el-input
									v-model="form.content"
									disabled
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<sc-VxeTable
					ref="save"
					:gridEvts="gridEvts"
					:data="form.roles"
					:gridOps="gridOps"
					:tablecode="'market_offer_promotion_role'"
				>
				</sc-VxeTable>
			</el-tab-pane>
		</sk-tabs>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button
				type="primary"
				v-if="form.status_id != 0"
				:loading="isSaveing"
				@click="submit()"
				>保 存</el-button
			>
		</template>
	</el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import skAutodcomplete from "@/components/skAutoComplete";
import XEUtils from "xe-utils";
export default {
	emits: ["success", "closed"],
	components: { skAutoChoose, skDicSelect, skAutodcomplete },
	data() {
		return {
			mode: "add",
			digloading: false,
			gridEvts: {},
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			form: {
				id: "",
				material: {},
				billdate: XEUtils.toDateString(
					new Date(),
					"yyyy-MM-dd HH:mm:ss"
				),
				customer: {},
				department: {},
				content: "",
				roles: [],
			},
			rules: {
				billdate: { required: true, message: "启用日期必填" },
				service_id: { required: true, message: "业务类型必须选" },
				price: { required: true, message: "优惠单价必填" },
			},
			visible: false,
			isSaveing: false,
			gridOps: {
				height: 300,
			},
		};
	},
	watch: {
		"form.roles": {
			handler(val) {
				this.form.content = val
					.map((v, k) => {
						let count = k + 1;
						if (v.field == "色卡") {
							if (v.action == "等于") {
								return count + "、色卡";
							} else return count + "、非色卡";
						} else if (v.field == "门市客") {
							if (v.action == "等于") {
								return count + "、门市客";
							} else return count + "、非门市客";
						}

						if (
							v.field == null ||
							v.action == null ||
							v.value == null
						) {
							return "";
						}
						return count + "、" + v.field + v.action + v.value;
					})
					.join("; ");
			},
			deep: true,
		},
	},
	mounted() {},
	methods: {
		//显示
		open(mode = "add") {
			this.mode = mode;
			this.visible = true;
			return this;
		},
		materialSelect(data) {
			this.form.material = data;
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm1.validate(async (valid) => {
				if (valid)
					this.$refs.dialogForm.validate(async (valid) => {
						if (valid) {
							this.isSaveing = true;
							this.$API.market.offer.savepromotion
								.post(this.form)
								.then((res) => {
									if (res.code == 200) {
										this.$emit(
											"success",
											this.form,
											this.mode
										);
										this.visible = false;
										this.$message.success("操作成功");
									}
								})
								.finally(() => {
									this.isSaveing = false;
								});
						}
					});
			});
		},
		getInfo(id) {
			this.digloading = true;
			this.$API.market.offer.role
				.get({
					filter: [{ promotions_id: id }],
				})
				.then((res) => {
					if (res.code == 200) {
						this.form.roles = res.data.rows;
					}
				})
				.finally(() => {
					this.digloading = false;
				});
		},
		//表单注入数据
		setData(data) {
			Object.assign(
				this.form,
				this.$TOOL.objCopy(this.$TOOL.removeNull(data))
			);
			this.getInfo(data.id);
		},
	},
};
</script>
